<template>
  <div class="public-header" :style="`background:url(${imgUrl}) no-repeat center`">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "PublicHeader",
  props:{
    imgUrl:{
      type:String,
      default:''
    }
  },
  data() {
    return {
    };
  },
 
};
</script>
<style lang='scss' scoped>
.public-header {
  height: 500px;
  width: 100%;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  h1 {
    margin-top: 180px;
    font-size: 60px;
  }
  p {
    position: relative;
    margin-top: 20px;
    font-size: 16px;
    opacity: 0.7;
    &::after {
      position: absolute;
      top: -11px;
      left: 50%;
      transform: translate(-50%, 0);
      content: "";
      width: 97px;
      height: 1px;
      background-color: #4f7bd9;
    }
  }
}
</style>